let arr = ['你不是一个人','你不是一个人','你不是一个人','你不是一个人','你不是一个人','你不是一个人','你不是一个人','你不是一个人','你不是一个人','你不是一个人']
let name = ['薛之谦','薛之谦/666','薛之谦','薛之谦','薛之谦','薛之谦','薛之谦','薛之谦','薛之谦','薛之谦',]
for(let i = 0;i<arr.length;i++){
    document.write(
        `<div class="u-hd">
            <div class="song">
                <span class="num">${i+1}.</span>
                <i class="ply"></i>
                <a href="#" class="tip">
                <b>${arr[i]}</b>
                </a>                   
                <em>-</em>
                <span>${name[i]}</span>
            </div>
            <div class="four">
                <div class="opt">
                <a href="#" class="add" title="添加到播放列表"></a> 
                <a href="#" class="fav" title="收藏"></a> 
                <a href="#" class="share" title="分享"></a> 
                <a href="#" class="dl" title="下载"></a>
                </div>
            </div>
            <div class="tops">
            </div>
        </div>` 
    ) 
    const uhd = document.querySelectorAll('.u-hd')
    const opt = document.querySelectorAll('.u-hd .opt')
    uhd[i].addEventListener('mouseenter',function(){
        opt[i].style.display = 'flex'
    })
    uhd[i].addEventListener('mouseleave',function(){
        opt[i].style.display = 'none'
    })
}

const ply = document.querySelectorAll('.ply')
ply[0].style.backgroundPosition=' -20px -128px'
